class Dialog {
  constructor({
    titleText,
    content,
    bottomBtnContent,
    confirm,
    confirmText = '确定',
    cancel,
    dialogWidth = '400px',
    dialogHeight = '400px'
  }) {
    this.titleText = titleText
    this.content = content
    //   this.buttons = buttons; //现在底部就确定和取消
    this.confirm = confirm
    this.confirmText = confirmText
    this.cancel = cancel
    this.dialogWidth = dialogWidth
    this.dialogHeight = dialogHeight
    this.bottomBtnContent = bottomBtnContent

    this.dialogElement = this.createDialogElement()
    this._render()
  }
  generateRandomString() {
    const timestamp = Date.now().toString() // 当前时间戳
    const randomLetters = Math.random()
      .toString(36)
      .substring(2, 6) // 随机字母
    const randomNumbers = Math.floor(Math.random() * 10000)
      .toString()
      .padStart(4, '0') // 随机数字
    return randomLetters + timestamp + +randomNumbers
  }

  createDialogElement() {
    const dialog = document.createElement('div')
    dialog.className = '_tj_dialog'
    //   头部
    const titleElement = document.createElement('div')
    titleElement.className = 'dialog-title'
    titleElement.innerHTML = `
      <div>
        <div>${this.titleText}</div>
        <div id="closeIcon"><svg style="height:20px;width:20px;" t="1715764789805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8041" width="200" height="200"><path d="M512 466.944l233.472-233.472a31.744 31.744 0 0 1 45.056 45.056L557.056 512l233.472 233.472a31.744 31.744 0 0 1-45.056 45.056L512 557.056l-233.472 233.472a31.744 31.744 0 0 1-45.056-45.056L466.944 512 233.472 278.528a31.744 31.744 0 0 1 45.056-45.056z" fill="#5A5A68" p-id="8042"></path></svg></div>
      </div>`
    dialog.appendChild(titleElement)

    //   内容区域
    const contentElement = document.createElement('div')
    contentElement.className = 'dialog-content'
    contentElement.innerHTML = `<div style="padding:4px;">
    ${this.content}
    </div>`
    dialog.appendChild(contentElement)

    //   底部
    const buttonsContainer = document.createElement('div')
    buttonsContainer.className = 'dialog-buttons'
    buttonsContainer.innerHTML = `<div>
        ${this.bottomBtnContent ? `<div style ='flex:1;font-size:12px;'>${this.bottomBtnContent}</div>` : ``}
        <div class="dialog-button" id="confirm">${this.confirmText}</div>
        <div class="dialog-button" id="cancel">取消</div>
      </div>`
    dialog.appendChild(buttonsContainer)

    return dialog
  }
  _render() {
    document.documentElement.style.setProperty('--dialog-width', this.dialogWidth)
    document.documentElement.style.setProperty('--dialog-height', this.dialogHeight)

    // 创建蒙版
    this.masking_out = document.createElement('div')
    this.masking_out.className = '_tj_masking_out'
    this.masking_out.id = this.generateRandomString()
    this.masking_out.appendChild(this.dialogElement)

    document.body.appendChild(this.masking_out)

    this.dialogElement.querySelector('#confirm').addEventListener('click', this.confirm)
    this.dialogElement.querySelector('#cancel').addEventListener('click', this.cancel)
    this.dialogElement.querySelector('#closeIcon').addEventListener('click', this.cancel)

    // document.addEventListener(
    //   'click',
    //   (e) => {
    //     debugger
    //     if (!e.target.closest(`#${this.dialogElement.id}`)) {
    //       debugger
    //       this.hide()
    //     }
    //   },
    //   true
    // )
  }
  show() {
    this.masking_out.style.display = 'block'
  }
  toggle() {
    if (this.masking_out.style.display === 'none') {
      this.show()
    } else {
      this.hide()
    }
  }

  hide() {
    this.masking_out.style.display = 'none'
  }
  clear() {
    document.body.removeChild(this.masking_out)
  }
}
export default Dialog
